<template>
	<view class="p-50 left bg-change">
		<view class="left title psr p-t-30">
			<image v-if="info.rsoc > 20" class="psa dian-chi" src="/static/img/electric/normal.png"></image>
			<image v-else class="psa dian-chi" src="/static/img/electric/hot.png"></image>
			<text class="ts-44 psa tc-w" style=" top: 96rpx; right: -10rpx;">{{info.rsoc || 0}}%</text>
			<view class="ts-40 tb wa left flex ali-cen m-b-25">
				<text class="tc-w">电池详情</text>
				<view class="jie-bang" @click="unbindBattery()">解绑</view>
			</view>
			<br>
			<text class="ts-24 wa left m-b-25">
				<text class="tc-w">{{info.name || 0}}</text>
			</text>
			<text class="ts-24 wa left m-b-50">
				<text class="tc-w">IMEI：{{info.imei || 0}}</text>
			</text>
			<view class="ts-24 wa left psr m-b-15 m-b-30 flex ali-cen">
				<image class="number-change xinhao" src="/static/img/electric/4G.png"></image>
				<text class="tc-w xinhao" style="width: 120rpx;">{{info.gsm || 0}}</text>
				<image class="number-change xinhao" style="width: 43rpx; height: 43rpx;" src="/static/img/electric/xin.png"></image>
				<text class="tc-w xinhao" style="width: 120rpx;">{{info.gps || 0}}</text>
			</view>
			<view class="ts-40 tb wa left flex ali-cen m-b-30">
				<view class="jie-bang zai-xian">{{ info.isOnline ? '在线' : '离线'}}</view>
				<view class="jie-bang zai-xian">车辆正常</view>
			</view>
			<view class="ts-22 wa left psr m-b-20">
				<text class="tc-w">数据更新：{{ nowTime }}</text>
				<image class="number-change psa" src="/static/img/electric/reload.png" @click="loadData()"></image>
			</view>
		</view>
		<view style="width: 650rpx; float: left; overflow: hidden; position: relative;">
			<view class="form-band form-band-3">
				<image class="form-band-icon1" src="/static/img/electric/ya.png"></image>
				<text class="ts-38 col-1 left m-b-2 m-t-15">{{info.packVoltage || 0}}V</text>
				<text class="tc-gray ts-26 col-1 left">总电压</text>
			</view>
			<view class="form-band form-band-3" style="position: absolute; left: 50%; transform: translateX(-50%);">
				<image class="form-band-icon1" src="/static/img/electric/liu.png"></image>
				<text class="ts-38 col-1 left m-b-2 m-t-15">{{info.packCurrent || 0}}A</text>
				<text class="tc-gray ts-26 col-1 left">电流</text>
			</view>
			<view class="form-band form-band-3" style="float: right;">
				<image class="form-band-icon1" src="/static/img/electric/wendu.png"></image>
				<text class="ts-38 col-1 left m-b-2 m-t-15">{{info.maxNtc || 0}}℃</text>
				<text class="tc-gray ts-26 col-1 left">温度</text>
			</view>
		</view>
		<view style="width: 650rpx; float: left; overflow: hidden; position: relative;">
			<view class="form-band form-band-2 psa">
				<text class="ts-38 col-1 left m-b-2">{{info.avgVoltage || 0}}V</text>
				<text class="tc-gray ts-26 col-1 left">平均电压</text>
				<image class="form-band-icon2 psa" src="/static/img/electric/pinya.png"></image>
			</view>
			<view class="form-band form-band-2" style="float: right;">
				<text class="ts-38 col-1 left m-b-2">{{info.maxCellVoltage || 0}}A</text>
				<text class="tc-gray ts-26 col-1 left">最大充电电流</text>
				<image class="form-band-icon2 psa" src="/static/img/electric/maxliu.png"></image>
			</view>
		</view>
		<view style="width: 650rpx; float: left; overflow: hidden; position: relative;">
			<view class="form-band form-band-2 psa">
				<text class="ts-38 col-1 left m-b-2">{{info.packPower || 0}}kwh</text>
				<text class="tc-gray ts-26 col-1 left">最大启动电流</text>
				<image class="form-band-icon2 psa" src="/static/img/electric/qiliu.png" style="border-radius: 0rpx;"></image>
			</view>
			<view class="form-band form-band-2" style="float: right;">
				<text class="ts-38 col-1 left m-b-2">{{info.startCount || 0}}次</text>
				<text class="tc-gray ts-26 col-1 left">启动次数</text>
				<image class="form-band-icon2 psa" src="/static/img/electric/cishu.png"></image>
			</view>
		</view>
		<view class="form-submit" @click="startHeat()">
			开始加热
		</view>
		<!-- <view class="form-submit form-submit-w">
			预约加热
		</view> -->
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				css:{},
				submitDisabled:false,
				car_id: '',
				battery_id: '',
				latitude: 39.909,
				longitude: 116.39742,
				info:{},
				nowTime: '',
			}
		},
		onLoad(options) {
			this.battery_id = options.id
			this.car_id = options.car_id
			this.loadData()
		},
		methods: {
			
			loadData(){
				this.$api.get({
					url: '/common/template',
					loadingTip:'加载中...',
					data: {
						type:'user',
					},
					success: res => {
						// uni.stopPullDownRefresh();
						this.$xyfun.setNavBar(' ',res.page.style.navigationBarBackgroundColor,res.page.style.navigationBarTextStyle);
					}
				});
				this.$api.get({
					url: '/battery/battery/detail',
					loadingTip:'加载中...',
					data: {
						id: this.battery_id,
					},
					success: res => {
						this.info = res
						this.nowTime = this.$xyfun.timeFormat()
					}
				})
			},
			startHeat() {
				uni.showModal({
					title: '开始加热',
					content: '请确认是否开启加热？',
					success: res => {
						if (res.confirm) {
							if (Number(this.info.maxNtc) > 15) {
								this.$xyfun.msg('电池温度要低于15度 才可以开启加热')
								return
							}
							this.$api.post({
								url: '/battery/battery/startHeat',
								data: {
									imei: this.info.imei
								},
								success: res => {
									// 刷新当前页面	
									this.loadData()
								}
							})
						}
					}
				})
			},
			unbindBattery() {
				uni.showModal({
					title: '解绑电池',
					content: '请确认是否解绑电池？',
					success: res => {
						if (res.confirm) {
							this.$api.post({
								url: '/battery/battery/unbindBattery',
								data: {
									car_id: this.car_id,
									imei: this.info.imei
								},
								success: res => {
									uni.reLaunch({
										url: '/pages/index?id='+this.car_id
									})
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.dian-chi {
		width: 280rpx;
		height: 420rpx;
		top: -10rpx;
		right: -50rpx;
	}
	.jie-bang {
		display: inline-block;
		font-size: 22rpx;
		color: white;
		padding: 10rpx 32rpx;
		border: 1px solid white;
		border-radius: 30rpx;
		margin-left: 30rpx;
	}
	.zai-xian {
		margin-left: 0rpx;
		margin-right: 30rpx;
		padding: 8rpx 25rpx 8rpx 42rpx;
		background-color: white;
		color: #8a8686;
		position: relative;
		&::before {
			position: absolute;
			display: inline-block;
			content: '';
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background-color: #3BD9A8;
			top: 16rpx;
			left: 20rpx;
		}
	}
	.number-change {
		width: 35rpx;
		height: 35rpx; 
		float: left;
		margin-left: 15rpx;
		margin-top: -5rpx;
	}
	.xinhao {
		width: 30rpx;
		height: 30rpx; 
		margin-left: 0rpx;
		margin-right: 15rpx;
		float: left;
	}
	.title {
		width: 650rpx;
		position: relative;
		.title-icon {
			position: absolute;
			width: 45rpx;
			height: 45rpx; 
			border-radius: 50rpx;
			top: 15rpx;
			right: 70rpx;
		}
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-band {
		width: 570rpx;
		margin-top: 35rpx;
		padding: 40rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		position: relative;
		float: left;
		.form-band-icon {
			position: absolute;
			top: 52rpx;
			right: 50rpx;
			width: 65rpx; 
			height: 65rpx; 
			border-radius: 65rpx;
		}
	}
	.form-band-2 {
		padding: 30rpx 25rpx;
		width: 256rpx;
		height: 95rpx;
		.form-band-icon2 {
			width: 70rpx;
			height: 70rpx;
			border-radius: 65rpx;
			top: 38rpx;
			right: 30rpx;
		}
	}
	.form-band-3 {
		padding: 30rpx 25rpx;
		width: 150rpx;
		height: 144rpx;
		margin-left: 0rpx;
		border: none;
	}
	.form-band-icon1 {
		width: 45rpx;
		height: 45rpx; 
		margin-left: 0;
	}
	.bg-change {
		background-image: linear-gradient(#005650, white);
	}
	.form-submit {
		margin: 35rpx 0 0rpx;
		width: 648rpx;
		height: 100rpx;
		border-radius: 15rpx;
		border: 1px solid rgba(0,86,80,1);
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-submit-w {
		background-color: white;
		color: rgba(0,86,80,1);
	}
</style>